import React from 'react';
import {Form, Input, Button, Icon} from 'antd';
import LoginService from '../util/service/login.service';
import * as public_action from '../actions/public';
// 1. 显示账号密码输入框和登陆按钮
// 2. 点击登录按钮后, 调用服务端登录接口, 并更新登录状态, 调用父元件的requestLogin方法, 刷新页面
class Login extends React.Component {

  constructor() {
    super();
    this.state={
      userName: '',
      password: ''
    }
  }

  // 登陆请求
  requestLogin = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        //执行登录操作
        this.reqLogin(values)
        // let dispatch = this.props.dispatch;
        // console.log("dispatch:",dispatch);
        // dispatch(public_action.login());
        // LoginService.requestLogin({...values}).then((res) => {
        //   console.log("res", res);
        //   this.requestLogin();
        // });
      }
    });
  }

  // 登录成功后到回调
  reqLogin = () => {
    this.props.reqLogin();
  }

  componentDidMount() {
    // do nothing
  }

  render() {
    const {getFieldDecorator} = this.props.form;
    return(
      <div className="Login">
          <Form onSubmit={this.requestLogin} className="login-form">
              <Form.Item>
                {getFieldDecorator('userName', {
                  rules: [{ required: true, message: '请输入登录账号!' }],
                })(
                  <Input size="large" prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="请输入登录账号" />
                )}
              </Form.Item>
              <Form.Item>
                {getFieldDecorator('password', {
                  rules: [{ required: true, message: '请输入您的密码!' }],
                })(
                  <Input size="large" prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="请输入登录密码" />
                )}
              </Form.Item>
              <Form.Item>
                <Button type="primary" htmlType="submit" size="large" className="login-form-button">
                  登录
                </Button>
              </Form.Item>
          </Form>
    </div>
    )
  }
}

export default Form.create()(Login);